<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .advert_wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: #f6f6f6;
            position: fixed;
            right: 5px;
            bottom: 5px;
            /* display: none; */
        }

        .advert_wrapper .advert_header {
            display: flex;
            line-height: 30px;
            font-size: 14px;
            position: relative;
        }

        .advert_wrapper .advert_header .advert_close {
            position: absolute;
            right: 0;
            top: 0;
            background-color: red;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .advert_main {
            width: 100%;
        }

        .advert_main video {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <div class="advert_wrapper">   => 点击跳转百度
        <div class="advert_header">
            <div class="advert_title">距离广告关闭还有10秒</div>
            <div class="advert_close">x</div>   => 点击关闭小广告
        </div>
        <div class="advert_main">
            <a href="https://www.baidu.com">
                <video src="../video/ad.mp4" autoplay muted loop> </video>
            </a>
        </div>
    </div> -->
</body>

<script>

    // JS动态生成 

    // 1. 基于模板字符串 先将html结构拼接到一个字符串中, 再将整个字符串赋值到容器中(innerHTML)

    // 优点:
    // 可以根据既定的模板字符串 => 快速生成指定html结构内容  (商品列表 批量渲染)   

    // 缺点:
    // 拼接的html结构是字符串  => 无法在拼接时给元素绑定事件  => 只有等到放到页面中,页面重新渲染之后才能获取元素绑定事件

    // 2. 基于DOM节点创建动态生成  

    // 优点:
    // 直接创建html元素 => 添加内容 样式 属性 绑定事件   => 写插件(只需调用方法 所有内容都是动态生成的)

    // 缺点:
    // 创建起来比较麻烦,代码冗余 => 对于复杂的html结构而言

    var timeoutTimer = null;
    var intervalTimer = null;

    advertLoop();

    function advertLoop(delay) {
        delay = delay === undefined ?1000: delay;

        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(function () {
            // advert_wrapper
            var advertWrapper = document.createElement("div");
            advertWrapper.className = "advert_wrapper";
            advertWrapper.onclick = function(){
                location.href = "https://www.baidu.com";
            }

            // advert_header
            var advertHeader = document.createElement("div");
            advertHeader.className = "advert_header";
            advertWrapper.appendChild(advertHeader)

            var advertTitle = document.createElement("div");
            advertTitle.className = "advert_title";
            advertTitle.textContent = "距离广告关闭还有10秒";
            advertHeader.appendChild(advertTitle);

            var advertClose = document.createElement("div");
            advertClose.className = "advert_close";
            advertClose.textContent = "x";
            advertClose.onclick = function(e){
                advertWrapper.remove();
                clearInterval(intervalTimer);
                clearTimeout(timeoutTimer);
                // advertLoop(delay);

                var e = e || window.event;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }


            }
            advertHeader.appendChild(advertClose);

            // advert_main
            var advertMain = document.createElement("div");
            advertMain.className = "advert_main";
            advertWrapper.appendChild(advertMain);

            var a = document.createElement("a");
            // a.setAttribute("href","https://www.baidu.com"); // 属性节点
            a.href = "https://www.baidu.com"; //元素节点的属性
            advertMain.appendChild(a);

            var video = document.createElement("video");
            video.src = "../video/ad.mp4";
            // video.controls = true; // 是否显示video的控制器
            video.muted = true; // 是否静音
            video.autoplay = true; // 是否自动播放
            video.loop = true; // 是否轮播
            a.appendChild(video);

            document.body.appendChild(advertWrapper);

            var num = 10;
            advertTitle.innerText = `距离广告关闭还有${num}秒`;
            intervalTimer = setInterval(function () {
                num--;
                advertTitle.innerText = `距离广告关闭还有${num}秒`;
                if (num <= 0) {
                    clearInterval(intervalTimer);
                    advertWrapper.remove();
                    advertLoop(delay)
                }
            }, 1000)


        }, delay);

    }

</script>

</html>